<template>
  <div>
    <van-nav-bar
      title="注册"
      left-text="登录"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 使用mintui组件创建登录页面 -->
    <!-- 表单注册 -->
    <div>
      <!--  @blur="checkName" 一旦输球焦点，对用户名进行验证-->
      <!-- .native会被mt-field当做自定义事件，不会被xue当做原生焦点失去  -->
      <!-- capture失去焦点input不会通知父组件a标签，没有冒泡事件，使a标签上的事件处理函数在事件捕获阶段邮箱执行 -->
      <!-- 根据用户名的验证，动态显示nameState -->
      <mt-field
        v-model="uname"
        type="text"
        label="用户名"
        placeholder="请输入用户名"
        :state="unameState"
        @blur.native.capture="checkUname"
      ></mt-field>
      <mt-field
        v-model="phone"
        type="text"
        label="手机号"
        placeholder="请输入手机号"
        :state="phoneState"
        @blur.native.capture="checkPhone"
        :attr="{ maxlength: 11 }"
      ></mt-field>
      <mt-field
        v-model="upwd"
        type="password"
        label="密码"
        placeholder="请输入密码"
        :state="upwdState"
        @blur.native.capture="checkUpwd"
        :attr="{ maxlength: 6 }"
      ></mt-field>
      <!-- :attr给组件内部的input标签添加原生属性 -->
      <mt-field
        v-model="reupwd"
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
        :state="reupwdState"
        @blur.native.capture="checkReupwd"
        :attr="{ maxlength: 6 }"
      ></mt-field>
    </div>
    <!-- 注册按钮 -->
    <mt-button type="default" size="large" @click="register"
      >快速注册</mt-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      unameState: "", //用户名

      upwd: "",
      upwdState: "", //密码

      reupwd: "",
      reupwdState: "", //确认密码

      phone: "",
      phoneState: "", //手机号
    };
  },
  methods: {
    onClickLeft() {
      // 返回登录页面
      this.$router.push("/login");
    },
    onClickRight() {
      this.$router.push("/");
    },

    // 焦点事情后执行用户验证
    checkUname() {
      // 验证账号的用户名
      let reg = /^\w{3,9}$/;
      if (reg.test(this.uname)) {
        this.unameState = "success";
      } else {
        this.unameState = "error";
      }
    },
    //  验证用户名的密码
    checkUpwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.upwd)) {
        this.upwdState = "success";
      } else {
        this.upwdState = "error";
      }
    },
    //  再次确认用户名的密码
    checkReupwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.reupwd) && this.upwd == this.reupwd) {
        this.reupwdState = "success";
      } else {
        this.reupwdState = "error";
      }
    },
    // 验证手机号
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phoneState = "success";
      } else {
        this.phoneState = "error";
      }
    },
    register() {
      if (this.uname && this.upwd && this.phone) {
        const url = "http://127.0.0.1:3000/user/register";
        console.log(url);
        let obj = {uname: this.uname,upwd: this.upwd,phone: this.phone};
        console.log(obj);
        //  `uname=${this.uname}&upwd=${this.upwd}&phone=${this.phone}`
        this.axios.post(url, obj).then((res) => {
          console.log(res);
          if ((res.data.meta.status = 200)) {
            this.$dialog.alert({
              message: "注册成功",
            });
          } else if ((res.data.meta.status = 403)) {
            this.$dialog.alert({
              message: "用户名或者手机已注册，请重新填写",
            });
          } else {
            this.$dialog.alert({
              message: "请求错误",
            });
          }
        });
      }
    },
  },
  // mounted() {},
};
</script>

